Typography
The base font size is 14px. All other font sizes are based on this value.
Display
Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.
| Class | Equivalent pixels | Equivalent rems | Example |
|---|---|---|---|
| .display-1 | 80px | 5.714rem | Display |
| .display-2 | 72px | 5.143rem | Display |
| .display-3 | 64px | 4.571rem | Display |
| .display-4 | 56px | 4rem | Display |
| .display-5 | 48px | 3.429rem | Display |
| .display-6 | 40px | 2.857rem | Display |
Headings
| Class | Tag | Equivalent pixels | Equivalent rems | Example |
|---|---|---|---|---|
| .h1 | h1 | 40px | 2.857rem | Heading |
| .h2 | h2 | 32px | 2.286rem | Heading |
| .h3 | h3 | 28px | 2rem | Heading |
| .h4 | h4 | 24px | 1.714rem | Heading |
| .h5 | h5 | 20px | 1.429rem | Heading |
| .h6 | h6 | 16px | 1.143rem | Heading |
Font Sizes
The base font size is 14px. All other font sizes are based on this value.
| Class | Equivalent pixels | Equivalent rems | Example |
|---|---|---|---|
| .fs-4xl | 32px | 2.286rem | Example |
| .fs-3xl | 30px | 2.143rem | Example |
| .fs-xxl | 24px | 1.714rem | Example |
| .fs-xl | 20px | 1.429rem | Example |
| .fs-lg | 16px | 1.143rem | Example |
| .fs-md | 14px (root) | 1rem | Example |
| .fs-sm | 13px | 0.929rem | Example |
| .fs-xs | 12px | 0.857rem | Example |
| .fs-xxs | 11px | 0.786rem | Example |
| .fs-3xs | 10px | 0.714rem | Example |
Font Weights
Kyber's predefined font weight classes allow developers and designers to easily apply different font weights to text elements, providing fine-grained control over typography and emphasizing or de-emphasizing text as needed.
| Class | Equivalent Weight | Example |
|---|---|---|
| .fw-light | 200, 300 | Example |
| .fw-normal | 400 | Example |
| .fw-medium | 500 | Example |
| .fw-semibold | 600 | Example |
| .fw-bold | 700 | Example |
Section Headers
| Class | Example |
|---|---|
| .section-header-xs | Section Heading |
| .section-header-sm | Section Heading |
| .section-header-md | Section Heading |
| .section-header-lg | Section Heading |
| .section-header-xl | Section Heading |
Links
Standalone hyperlinks that do not use the <Link> component can be styled with the .klink class. Which will apply the expected text decoration and hover styling.
When using icons within a Link it is recommend to avoid rendering the text-decoration on hover. One option is to use the d-inline-block text-decoration-none classes on the icon.
Other Font Concerns
Font Family
There are 2 utility classes that can be used to apply Ivar Text Regular and Ivar Headline font families to containers.